import ContentHead from '../../common/contentHead';
import { InbizIcon } from '@inbiz/utils';
import type { ReactElement } from 'react';
import type { IConfigItem } from './content';

function Head({
  children,
  ...props
}: {
  sortField: IConfigItem['config']['sortField'];
  sort: { IndexFieldName: string; order: 'asc' | 'desc' | undefined };
  onSortChange?: (data: { IndexFieldName: string; order: 'asc' | 'desc' | undefined }) => void;
  children?: ReactElement | boolean;
  section?:ReactElement
}) {
  return (
    //@ts-ignore
    <ContentHead {...props}>
      {(list, sortChange) => (
        <div className="headBody">
          <div className="sortBox">
            <ul className="headSort">
              {list.map((item) => {
                return (
                  <li
                    key={item.IndexFieldName}
                    onClick={() => sortChange(item.IndexFieldName)}
                    className={item.selected ? 'selected' : ''}
                  >
                    {item.IndexFieldDesc || item.IndexFieldName}{' '}
                    <InbizIcon
                      type={
                        item.sort === 'asc' || item.sort.sort === 'asc' ? 'icon-ic-arrow-up-bold' : 'icon-ic-arrow-down-bold'
                      }
                    />
                  </li>
                );
              })}

            </ul>
          </div>
          {
            !!children && <div className="headRight">{children}</div>
          }
        </div>
      )}

    </ContentHead>
  );
}

export default Head;
